<template>
  <div class="inner-wrapper">
    <el-row>
      <el-col :span="24">
        <div class="grid-content">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>控制器</el-breadcrumb-item>
            <el-breadcrumb-item>查看事件日志</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-col>
    </el-row>

    <el-table :data="tableAttr" border style="width: 100%">
      <el-table-column prop="index" label="INDEX">
        <template scope="scope">
          <span class="link" @click="getDetail(scope.row.index)">{{scope.row.index}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="NAME">
        <template scope="scope">
          <span class="link" @click="getDetail(scope.row.name)">{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="STATE">
      </el-table-column>
      <el-table-column prop="primary" label="PRIMARY">
        <template scope="scope">
          <input type="checkbox" v-model="scope.row.primary">
        </template>
      </el-table-column>
      <el-table-column prop="locality" label="LOCALITY">
      </el-table-column>
      <el-table-column prop="time" label="UP TIME(day(hh:mm))">
      </el-table-column>
      <el-table-column prop="rp_id" label="RP ID">
        <template scope="scope">
          <span>{{scope.row.rp_id.rp}}</span>
          <span>{{scope.row.rp_id.id}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="encl_index" label="ENCL INDEX">
      </el-table-column>
      <el-table-column prop="ula" label="ULA">
      </el-table-column>
      <el-table-column prop="icc" label="ICC">
        <template scope="scope">
          <span>{{scope.row.icc.status}}</span>
          <span>{{scope.row.icc.content}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="version" label="FIRMWARE VERSION">
      </el-table-column>
      <el-table-column prop="crash_dump" label="CRASH DUMP">
        <template scope="scope">
          <input type="checkbox" v-model="scope.row.crash_dump">
        </template>
      </el-table-column>
      <el-table-column prop="log_disk" label="LOG DISK">
        <template scope="scope">
          <input type="checkbox" v-model="scope.row.log_disk">
        </template>
      </el-table-column>
    </el-table>

    <el-row>
      <h2 class="form-caption">表单标题</h2>
      <el-form ref="form" :model="form" label-width="250px">

        <el-form-item label="Age">
          <el-radio-group v-model="form.age">
            <el-radio label="newer events"></el-radio>
            <el-radio label="older events"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="Order">
          <el-radio-group v-model="form.order">
            <el-radio label="Ascending"></el-radio>
            <el-radio label="Descending"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="Severity Filter">
          <el-checkbox-group v-model="form.severity">
            <el-checkbox label="information" name="severity"></el-checkbox>
            <el-checkbox label="warning" name="severity"></el-checkbox>
            <el-checkbox label="error" name="severity"></el-checkbox>
            <el-checkbox label="fatal" name="severity"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="Component Filter">
          <el-checkbox-group v-model="form.component">
            <el-checkbox label="All/None" name="component"></el-checkbox>
            <el-checkbox label="AMPD" name="component"></el-checkbox>
            <el-checkbox label="ASM" name="component"></el-checkbox>
            <el-checkbox label="BD" name="component"></el-checkbox>
            <el-checkbox label="CE" name="component"></el-checkbox>
            <el-checkbox label="CM" name="component"></el-checkbox>
            <el-checkbox label="CPLD" name="component"></el-checkbox>
            <el-checkbox label="DIX" name="component"></el-checkbox>
            <el-checkbox label="DUCK" name="component"></el-checkbox>
            <el-checkbox label="ENG" name="component"></el-checkbox>
            <el-checkbox label="ES" name="component"></el-checkbox>
            <el-checkbox label="FC" name="component"></el-checkbox>
            <el-checkbox label="GBL" name="component"></el-checkbox>
            <el-checkbox label="HP" name="component"></el-checkbox>
            <el-checkbox label="IBCTRL" name="component"></el-checkbox>
            <el-checkbox label="IBDATA" name="component"></el-checkbox>
            <el-checkbox label="IOF" name="component"></el-checkbox>
            <el-checkbox label="IVRE" name="component"></el-checkbox>
            <el-checkbox label="JEX" name="component"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="Number of Events to Retrieve">
          <el-select v-model="form.retrieve" placeholder="100">
            <el-option label="200" value="200"></el-option>
            <el-option label="300" value="300"></el-option>
            <el-option label="400" value="400"></el-option>
            <el-option label="500" value="500"></el-option>
            <el-option label="600" value="600"></el-option>
            <el-option label="700" value="700"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Starting Sequence Number">
          <el-select v-model="form.sequence" placeholder="0">
            <el-option label="0" value="0"></el-option>
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
            <el-option label="4" value="4"></el-option>
            <el-option label="5" value="5"></el-option>
            <el-option label="6" value="6"></el-option>
            <el-option label="7" value="7"></el-option>
            <el-option label="8" value="8"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onTable">view table</el-button>
          <el-button @click="onText">view text</el-button>
        </el-form-item>
      </el-form>

    </el-row>
  </div>
</template>
<script>
  export default {
    name: 'controller_show',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        tableAttr: [{
          index: 0,
          name: 'B',
          state: 'Running',
          primary: true,
          locality: 'LOCAL',
          time: '0 days(0:32)',
          rp_id: {
            rp: 1,
            id: '0x0001fffa01d6000'
          },
          encl_index: 0,
          ula: '0000000s02d0s2s',
          icc: {
            status: 'up',
            content: 'DG+MSG+MAD'
          },
          version: '3.10.0132795',
          crash_dump: true,
          log_disk: false
        }, {
          index: 1,
          name: 'A',
          state: 'Running',
          primary: false,
          locality: 'REMOTE',
          time: '0 days(0:32)',
          rp_id: {
            rp: 1,
            id: '0x0001fffa01d6000'
          },
          encl_index: 2,
          ula: '0fd1f4g1ed25g4',
          icc: {
            status: 'up',
            content: 'DG+MSG+MAD'
          },
          version: '3.10.1547201144',
          crash_dump: false,
          log_disk: true
        }],
        form: {
          age: true,
          order: true,
          severity: [],
          component: [],
          retrieve: 100,
          sequence: 0
        }
      }
    },
    methods: {
      onTable () {
        console.log('查看表!')
      },
      onText () {
        console.log('查看文本!')
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss">


</style>
